<template>
  <div class="home-container">
    <van-nav-bar class="page-nav-bar" fixed>
      <van-button 
        slot="title"
        class="search-btn"
        type="info"
        round
        size="small"
        icon="search"
      >搜索</van-button>
    </van-nav-bar>
    <van-tabs v-model="active" animated swipeable>
      <van-tab :title="channel.name"
      v-for="channel in channels" :key="channel.id"
      >
      <!-- 文章列表组件 -->
      <article-list :channel="channel"/>
    </van-tab>
    
      <!-- 插槽占位 -->
      <div slot="nav-right" class="placeholder"></div>
      <div slot="nav-right" class="hb-btn">
        <i class="iconfont icon-gengduo"></i>
      </div>
    
    </van-tabs>
  </div>
</template>

<script>
import { getUserChannels } from "@/api/user"
import ArticleList from '@/views/home/components/article-list.vue'
export default {
  name: "HomeIndex",
  components: {
    ArticleList
  },
  data() {
    return {
      active: 0,
      channels:[]
    }
  },
  created() { 
    this.loadChannels()
  },
  methods: {
    async loadChannels() {
      try {
        const { data } = await getUserChannels()
        console.log(data);
        this.channels = data.data.channels
      } catch (err) {
        this.$toast('获取数据失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.home-container{
  padding-top: 89px;
  padding-bottom: 50px;
  
    /deep/.van-nav-bar__title {
      // 此设置未生效,在前面加上/deep/才行
      max-width: unset;
  }
  
  
.search-btn{
  width: 278px;
  height: 32px;
  border: none;
  font-size: 14px;
  background-color: #5babfb;
  .van-icon-search{
    font-size: 20px;
  }
}
/deep/.van-tab{
  width: 95px;
  font-size: 14px;
  color: #777777;
  border-right: 1px solid #edeff3;
  border-bottom: 1px solid #edeff3;
}
// 上面元素的父亲设置高度   vant组件中它有高度
/deep/.van-tabs__wrap{
  height: 44px;
  // 增加当前元素的层级，能够展示在最上方
  z-index: 1;
  position: fixed;
  // 设置高度显示出来
  top: 45px;
  // 只设置完高度，左右两边的内容展示不齐全，无法移动，设置左右为0
  left: 0;
  right: 0;
}
/deep/.van-tabs__line{
  width: 16px;
  height: 3px;
  margin-bottom: 5px;
  background-color: #3296fa;
}
/deep/.van-tab--active{
  font-size: 14px;
  color: #333333;
}
.hb-btn{
  // 开启固定定位
  position: fixed;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33px;
  height: 43px;
  background-color: #fff;
  opacity: 0.9;//透明度
  .icon-gengduo{
    width: 20px;
    height: 17px;
  }
  // 伪元素
  &:before{
    content: "";
    position: absolute;
    left: 0;
    // 在手机上1px可以看出来
    width: 1px;
    height: 100%;
    background-image: url(@/assets/gradient-gray-line.png);
    background-size: contain;//长边显示
  }
}
.placeholder{
  // 设置不参与平分父级的宽度  默认是1
  flex-shrink: 0;
  // 这里的宽度如果和按钮一样，会有些奇怪
  width: 24px;
  height: 44px;
}

}


</style>